<template>
  <div>
    <Row>
      <Col span="12">
        <Button type="success" v-if="userEnabledNotify" icon="md-close" @click="setEnabledNotify">{{h5.closeNotify}}</Button>
        <Button type="success" v-if="!userEnabledNotify" icon="md-checkmark" @click="setEnabledNotify">{{h5.openNotify}}</Button>
      </Col>
      <Col span="12">
        <Button type="error" icon="ios-trash" @click="setEmptyMessage">{{h5.clearMessage}}</Button>
      </Col>
    </Row>
    <List item-layout="vertical">
      <ListItem v-for="(item,index) in alarmMessages.showDatas" :key="index">
        {{item.alarmCate}}
<!--        <ListItemMeta :title="item.alarmCate"/>-->
          <template slot="extra">
            <li>
              <span class="alarm_span_title">{{$t('time')}}: </span>
              <span>{{item.time}}</span>
            </li>
              <span class="alarm_span_title">{{$t('personnel')}}: </span>
              <span>{{item.user}}</span>
            <li>
              <span class="alarm_span_title">{{$t('organization')}}: </span>
              <span>{{item.organization}}</span>
            </li>
            <li>
              <span class="alarm_span_title">{{$t('device')}}: </span>
               <span>{{item.device}}</span>
            </li>
            <li>
              <span class="alarm_span_title">{{$t('location')}}: </span>
              <span>{{item.position}}</span>
            </li>
          </template>
<!--        <template slot="extra">
          <li>
            <span>{{item.user}}</span>
          </li>
          <li>
            <span>5454</span>
          </li>
          <li>
            <span>45464</span>
          </li>
        </template>-->
      </ListItem>
    </List>
    <Page :total="alarmMessages.page.total" :current="alarmMessages.page.current" :page-size="alarmMessages.page.size"
          @on-change="changePage"
          size="small" />
  </div>
</template>
<script>
import { currentUser,enabledNotify } from '@/api/user';
import {mapActions} from "vuex";
import {apiResult, getToken} from "@/libs/util";
import {login} from "@/api/login";
import TopnavPage from '_c/topnav/TopnavPage'
export default {
  name:"MessageForm",
  components:{TopnavPage},
  props:{
/*    alarmData:{
      type: Array,
      default:()=>{return [];}
    }*/
  },
  watch:{
    userMessage:{
      handler(n,o) {
        //console.log("watch.computed.userMessage-n: %o",n)
        //console.log("watch.computed.userMessage-o: %o",o)
        this.alarmMessages.page.total = n.length;
      },
      deep: true
    },
  },
  computed:{
    userMessage(){
      const messages = this.$store.getters.getUserMessage;
      //console.log("MessageForm.computed.userMessage: %o",messages)
      this.genAlarmDatas(messages);
      return messages;
    },
    userMessageCount(){
      return this.$store.getters.userMessageCount;
    },
    h5(){
      return{
        closeNotify:this.$t('alarm_close_notify'),
        openNotify:this.$t('alarm_open_notify'),
        clearMessage:this.$t('alarm_clear_message')
      }
    }
  },
  data(){
    return{
      sseSource:null,
      user:{enabledNotify:true},
      userEnabledNotify: true,
      alarmMessages:{
        page: {
          pages: 1,
          size: 5,
          total: 0,
          current: 1,
        },
        showDatas:[],
        allDatas:[],
      }

    }
  },
  methods:{
    ...mapActions([
      'pushUserMessage',
      'emptyUserMessage'
    ]),
    /**
     * 生成显示的数据
     */
    genAlarmDatas(messages){
      this.alarmMessages.allDatas=[];
      this.alarmMessages.showDatas = []

      if (!!messages && messages.length>0){
        messages.forEach(item=>{
          this.alarmMessages.allDatas.push(
            {
              alarmCate: this.$t('alarm_cate_'+item.data.alarmCate),
              time: item.data.time,
              user: item.data.user,
              device: item.data.device,
              organization: item.data.organization,
              position: item.data.position,
            }
          )
        })
        this.alarmMessages.page.total = this.alarmMessages.allDatas.length;
        //页数超过了就向后退
        if (this.alarmMessages.page.size * (this.alarmMessages.page.current-1)> this.alarmMessages.page.total){
          if (this.alarmMessages.page.current > 1)
            this.alarmMessages.page.current--;
        }
        //console.log("genAlarmDatas allDatas=%o",this.alarmMessages.allDatas)
        this.changeDataForPage();
      }
    },

    getCurrentUser(){
      const that=this;
      //取得当用户信息
      currentUser().then(res => {
        this.user = null;
          apiResult(res.data,false,result=>{
            //console.log(">>>>>> MessageForm.getCurrentUser result=%o",result)
            this.user = result.data;
            this.userEnabledNotify = this.user.enabledNotify;
          })
      })
    },
    setEnabledNotify(){
      const that=this;
      //取得当用户信息
      enabledNotify(JSON.stringify({enabledNotify:!this.userEnabledNotify})).then(res => {
        this.user = null;
          apiResult(res.data,true,result=>{
            that.userEnabledNotify = !that.userEnabledNotify;
          })
      })
    },
    setEmptyMessage(){
      this.$Modal.confirm({
        title: this.$t('alarm_clear_msg_confirm_title'),
        content: this.$t('alarm_clear_msg_confirm_message'),
        onOk: () => {
          this.emptyUserMessage();
        },
        onCancel: () => {}
      });
    },
    changePage(page){
      this.alarmMessages.page.current=page;
      this.changeDataForPage();
    },

    changeDataForPage(){
      this.alarmMessages.showDatas = [];
      const begin= (this.alarmMessages.page.current-1)*this.alarmMessages.page.size;
      let end= this.alarmMessages.page.current*this.alarmMessages.page.size-1;
      end = end > this.alarmMessages.page.total-1?this.alarmMessages.page.total-1:end;

      //显示的数据
      this.alarmMessages.showDatas=[];
      for(let i in this.alarmMessages.allDatas){
        if (i>= begin && i<= end){
          this.alarmMessages.showDatas.push(this.alarmMessages.allDatas[i])
        }
      }
    }
  },
  mounted() {
    this.getCurrentUser();
  },
}

</script>
<style>
.alarm_span_title{
  color: #0b54dc;
  font-style: italic;
  font-weight: bold;
}
</style>
